window.onload = function () {
    var banner = document.getElementById('banner')
    var img = ['2ffe446272182ec8343fc41dcc5da465.jpg',
        '616a99f8ede46b1b60896cc5f05f4f90.jpg',
        '721ad2a48f9e33c4c1f16164af948c80.jpg',
        'c8ee011e420bac56d1bcdf5e452a712d.jpg',
        'f8307b98884912892eaa8e9c6e4fbcd4.jpg'
    ]




    var oli = document.getElementById('banner').getElementsByTagName('li')
    var line = document.getElementById('line')
    for (let i = 0; i < oli.length; i++) {
        var index = i

        oli[index].onmouseover = function () {
            for (var j = 0; j < oli.length; j++) {
                oli[j].style.background = '#fff'
            }
            this.style.background = '#442818'
            banner.style['background'] = `url(images/${img[i]})  no-repeat 0 0/100%  100%`
        }
    }

    var i = 0

    function live() {
        if (i === img.length) {
            i = 0
        }
        for (var j = 0; j < oli.length; j++) {
            oli[j].style.background = '#fff'
            oli[j].style.transition = '1s'
        }
        oli[i].style.background = '#442818'
        banner.style.background = `url(images/${img[i]}) no-repeat 0 0/100%  100%`
        i++
    }
    setInterval(live, 2000)





    var img2 = ['new.jpg', 'birthday.png', 'child.png', 'party.png', 'active.png']
    var $ = function (node) {
        return document.createElement(node)
    }
    var adiv = document.getElementById('body1')
    for (let i = 0; i < 5; i++) {
        var ali = $('li')   
        ali.style.width = '200px'
        ali.style.height = '100px'
        ali.style.cursor = 'pointer'
        adiv.append(ali)
        ali.style.background = `url(images/${img2[i]})`
    }
}












